<!DOCTYPE html>

<head>
    <meta name='viewport' content='width=device-width, initial-scale=1' charset="utf-8"/>
    <title>会战系统登录</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.0/index.js"></script>
    <script src="{{ url_for('yobot_static', filename='password.js') }}"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.0/theme-chalk/index.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="{{ url_for('yobot_static', filename='yocool/js/yocool.i.js') }}"></script>
	<link rel="stylesheet" href="{{ url_for('yobot_static', filename='yocool/css/style.css') }}">
    <style>
		html{
			background-color: #FFFFFF;
		}
		
        #app {
            margin: auto;
        }
		
		h1 {
			font-size: 48px;
			font-weight: 400;
			color: #FFFFFF;
		}
    </style>
</head>

<body>
    <div class="header">

        <div class="inner-header flex">
            <h1>会战系统登录</h1>
        </div>
		<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
			<defs>
				<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
			</defs>
			<g class="parallax">
				<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
				<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
				<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
				<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
			</g>
		</svg>
</div>
<div id="app" class="container" style="margin-top: 5%;">
    <div class="container">
        <!--<h1 style="color: #409EFF;">登录</h1>-->

        {% if reason -%}
        <el-alert
                title="{{ reason }}"
                type="error">
        </el-alert>
        {% endif -%}

        

        <el-form ref="form" :model="form" :rules="rules" label-width="0px" style="width: 300px;">
            <el-form-item prop="qq">
                <el-input v-model="form.qq" name="user" placeholder="请输入QQ账号"></el-input>
            </el-form-item>
            <el-form-item prop="pwd">
                <el-input v-model="form.pwd" name="password" placeholder="不要输入QQ密码" type="password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit" style="width: 100%;margin-top: 20px;">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            form: {
                qq: "",
                pwd: ""
            },
            rules: {
                qq: [
                    {required: true, message: '这个账号是你的QQ号', trigger: 'blur'}
                ],
                pwd: [
                    {required: true, message: '如果忘记密码，可以私聊机器人“重置密码”', trigger: 'blur'},
                ],
            }
        },
        methods() {
            if (localStorage.login_qqid) {
                this.form.qq = String(localStorage.login_qqid);
            }
        },
        methods: {
            post: function (url, params) {
                //创建form表单
                const temp_form = document.createElement("form");
                temp_form.action = url;
                //如需打开新窗口，form的target属性要设置为'_blank'
                temp_form.target = "_blank";
                temp_form.method = "post";
                temp_form.style.display = "none";
                //添加参数
                for (const key in params) {
                    const opt = document.createElement("textarea");
                    opt.name = key;
                    opt.value = params[key];
                    temp_form.appendChild(opt);
                }
                document.body.appendChild(temp_form);
                //提交数据
                temp_form.submit();
            },
            onSubmit: function () {
                localStorage.login_qqid = this.form.qq;
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        const url = "{{ url_for('yobot_login') }}";
                        this.post(url, {
                            qqid: this.form.qq,
                            pwd: getHashWithSalt(this.form.pwd + this.form.qq)
                        });
                    } else {
                        console.log('请检查输入！');
                        return false;
                    }
                });
            }
        }
    })
</script>
</body>
</html>